<template>
  <div class="Renting">
    <!-- 搜索组件 -->
    <Search></Search>
    <section class="alltag">
      <!-- 功能标签开始 -->

      <mt-tabbar v-model="selected" class="tagbtn1">
        <mt-tab-item id="tab1" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/longrenting.png" />
          长租
        </mt-tab-item>
        <mt-tab-item id="tab2" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/room2.png" />
          短租
        </mt-tab-item>
        <mt-tab-item id="tab3" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/bill.png" />
          订单
        </mt-tab-item>
        <mt-tab-item id="tab4" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/message.png" />
          咨询
        </mt-tab-item>
      </mt-tabbar>

      <mt-tabbar v-model="selected" class="tagbtn2">
        <mt-tab-item id="tab5" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/roomx.png" />
          公寓
        </mt-tab-item>
        <mt-tab-item id="tab6" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/room1.png" />
          单租
        </mt-tab-item>
        <mt-tab-item id="tab7" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/goodroom.png" />
          优选
        </mt-tab-item>
        <mt-tab-item id="tab8" @click.native="linkTag(0)">
          <img slot="icon" src="../assets/img/tagbtn/roomserve.png" />
          托管
        </mt-tab-item>
      </mt-tabbar>
      <!-- 功能标签结束 -->
    </section>

    <!---->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <ZiRoom
      @click.native="linkRoom"
      v-for="(item, i) in houseData"
      :key="i"
      :item="item"
      @childItem="childItem"
    ></ZiRoom>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import Search from "../components/Search";
import ZiRoom from "../components/ZiRoom";
export default {
  components: {
    Search,
    ZiRoom,
  },
  data() {
    return {
      hid: "",
      selected: "",
      houseData: [],
      value1: 0,
      value2: "a",
      value3: "A",
      option1: [
        { text: "朝向", value: 0 },
        { text: "东", value: 1 },
        { text: "南", value: 2 },
        { text: "西", value: 3 },
        { text: "北", value: 4 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "价格从高到低", value: "b" },
        { text: "价格从低到高", value: "c" },
        { text: "面积从大到小", value: "d" },
        { text: "面积从小到大", value: "e" },
      ],
      option3: [
        { text: "价位", value: "A" },
        { text: "小于1000", value: "B" },
        { text: "小于3000", value: "C" },
        { text: "小于5000", value: "D" },
        { text: "小于7000", value: "E" },
        { text: "小于10000", value: "F" },
      ],
    };
  },
  methods: {
    linkTag(i) {
      switch (i) {
        case 1:
          this.$router.push("/Renting");
          break;
        case 2:
          this.$router.push("/community");
          break;
        case 3:
          this.$router.push("/login");
          break;
        case 4:
          this.$router.push("/message");
          break;
        default:
         this.$toast({
          message: "正在开发，敬请期待",
          // position: 'bottom',
          duration: 2000,
        });
          break
      }
    },
    childItem(val) {
      console.log(val);
      this.hid = val.hid;
    },
    loadNavItems() {
      this.axios.get("/house").then((res) => {
        res.data.results.forEach((item) => {
          if (item.house_photo) {
            item.image = require(`../assets/img/roomshow/${item.house_photo}`);
          }
        });
        this.houseData = res.data.results;
      });
    },
    linkRoom() {
      this.$router.push({
        name: "roomDetails",
        params: { parent: "Renting", hid: this.hid },
      });
    },
    ...mapMutations(["setActiveNews"]),
  },
  mounted() {
    this.loadNavItems();
  },
  computed: {
    //  ...mapState(['active'])
    activeNews: {
      get() {
        return this.$store.state.activeNews;
      },
      set(val) {},
    },
  },
};
</script>

<style>
/* 筛选模块 */
.Renting .filter {
  margin-bottom: 1rem;
}
/*搜索框 */
.Renting .search {
  position: fixed;
  top: 1px;
  width: 100%;
  z-index: 99;
}
.Renting .mint-searchbar {
  background-color: #fff;
}
.Renting .mint-searchbar-inner,
.mint-searchbar-core {
  background-color: rgb(245, 245, 245);
  border-radius: 2rem;
}
.Renting .mint-searchbar-inner {
  box-shadow: inset 0px 0px 3px -1px;
}

/* 搜索框结束 */
.Renting .content {
  height: 12rem;
}
/* 功能栏标签 */
.Renting .tagbtn1 {
  bottom: unset;
  top: 4rem;
  font-weight: 200;
  width: 90%;
  margin: auto;
  background-image: none;
}
.Renting .tagbtn2 {
  bottom: unset;
  top: 9rem;
  font-weight: 200;
  width: 90%;
  margin: auto;
  background-image: none;
}
.Renting .mint-tab-item-label {
  font-size: 0.8rem;
}
.Renting .mint-tab-item-icon {
  width: 3rem;
  height: 3rem;
}
/* 搜索标签 */
.Renting .mint-search {
  /* position: fixed; */
  width: 100%;
  top: 1px;
  z-index: 999;
  height: 4rem;
}
</style>
<style lang="less">
.Renting {
  .van-dropdown-menu {
    margin-top: 230px;
  }
}
</style>